<template>

  <div class="topBox">
    <div class="L"><a href="index.html">LOGO</a></div>
    <div class="R">
      <a href="map.html"><img src="/assets/images/map.png"></a>
    </div>
  </div>

  <van-swipe v-if="top" class="aui-m-slider" :autoplay="3000" indicator-color="#2f4f4f">
    <van-swipe-item v-for="(item,key) in top" :key="key">
      <van-image width="100%" height="280" fit="cover" :src="item.thumbs_text" @click="TopInfo(item.id)"/>
    </van-swipe-item> 
  </van-swipe>

  <div class="lqgwBox">
    <ul>
      <li>
        <router-link to="/product/index">
          <img src="/assets/images/quanbu.png">
          <p>全部商品</p>
        </router-link>
      </li>
      <li><a href="live.html"><img src="/assets/images/zibo.png"><p>商品直播</p></a></li>
      <li>
        <router-link to="/coupon/index">
          <img src="/assets/images/youhui.png">
          <p>优惠活动</p>
        </router-link>
      </li>
      <li>
        <router-link to="/product/ranking">
          <img src="/assets/images/bandan.png">
          <p>榜单排行</p>
        </router-link>
      </li>
    </ul>
  </div>
  <div class="contitbox">
    <p>新品<span>•</span>推荐</p>
  </div>
  <ul class="proul" v-if="news">
    <li v-for="(item,key) in news" :key="key">
      <div class="con">
          <router-link :to="{path: '/product/info', query: {proid: item.id}}">
              <van-image width="100%" height="200" :src="item.thumbs_text" />
              <p><span>￥</span>{{item.price}}</p>
          </router-link>
      </div>
    </li>
  </ul>

  <tabbar />
</template>

<script setup>
  import tabbar from '@/components/common/tabbar.vue';
import { onBeforeMount } from 'vue';

  const {proxy} = getCurrentInstance()

  //创建数据
  let top = ref([])
  let news = reactive([])

  //生命周期
  onBeforeMount(()=>{ ProductData() })

  //查询数据
  const ProductData = async () =>
  {
    var result = await proxy.$POST({
      url: 'index/index'
    })

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }

    top.value = result.data.top
    news = result.data.news
  }

  //轮播图跳转
  const TopInfo = (proid) => proxy.$router.push({path: '/product/info',query:{proid}})
</script>